<template>
  <div class="recommend">
    <div class="item">
      <div class="img" @click="toDetail(itemData.resource.id)">
        <van-image
          width="170rem"
          height="90rem"
          lazy-load
          :src="itemData.resource.cover"
          radius="5rem"
        />
        <!-- <img :src="itemData.resource.cover" alt="" /> -->
      </div>
      <div class="numbers">
        <div>
          <van-icon name="eye-o" color="#fff" />
          <p>{{ NumberFilter(itemData.resource.count.count_view) }}</p>
        </div>
        <div>
          <van-icon name="good-job-o" color="#fff" />
          <p>
            {{
              NumberFilter(
                likeList.indexOf(itemData.resource.id) != -1? itemData.resource.count.count_like + 1 : itemData.resource.count.count_like
              )
            }}
          </p>
        </div>
        <div>
          <p>{{ TimeFilter(itemData.resource.duration) }}</p>
        </div>
      </div>
      <h3 class="title">
        {{ itemData.resource.title }}
      </h3>
      <p
        class="author"
        @click.stop="toUserinfo(itemData.resource.author.userinfo.id)"
      >
        {{ itemData.resource.author.userinfo.username }}
      </p>
    </div>
  </div>
</template>

<script setup>
import { computed } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();
const props = defineProps(["itemData"]);
// console.log(props.itemData);
const likeList = ref(JSON.parse(localStorage.getItem("likeList")) || []);

function toDetail(id) {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
}
function toUserinfo(id) {
  router.push({
    path: "/userinfo",
    query: {
      id,
    },
  });
}

const NumberFilter = computed(() => {
  return (value) => {
    if (value < 10000) {
      return value;
    } else {
      let w = value > 10000 ? value / 10000 : value;
      let y = w > 10000 ? (w / 10000).toFixed(1) + "亿" : w.toFixed(1) + "万";
      return y;
    }
  };
});

const TimeFilter = computed(() => {
  return (value) => {
    // console.log(value);

    let s = (value % 60).toString().padStart(2, "0");
    let m = Math.floor(value / 60)
      .toString()
      .padStart(2, "0");

    let h = Math.floor(m / 60)
      .toString()
      .padStart(2, "0");

    if (value < 60) {
      return "00'" + s + "''";
    } else if (value >= 60 && m < 60) {
      return m + "'" + s + "''";
    } else {
      return h + "°" + m + "'" + s + "''";
    }
    //   else if()
    // console.log(s);
    // let y = w > 10000 ? (w / 10000).toFixed(1) + "亿" : w.toFixed(1) + "万";
    // return y;
  };
});
</script>

<style lang="scss" scoped>
.recommend {
  width: 170rem;
  background-color: #fff;
  border-radius: 5rem;

  .item {
    width: 170rem;
    height: 180rem;
    position: relative;
    .img {
      width: 170rem;
      height: 90rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 5rem;
      }
    }
    .numbers {
      padding: 0 12rem;
      display: flex;
      justify-content: space-between;
      width: 100%;
      color: #fff;
      font-size: 12rem;
      position: absolute;
      top: 70rem;
      left: 0rem;
      div {
        display: flex;
        align-items: center;
        p {
          margin-left: 3rem;
        }
      }
    }
    .title {
      padding: 12rem 12rem 10rem;
      font-size: 14rem;
      font-weight: bold;
      display: -webkit-box;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      height: 50rem;
    }

    .author {
      width: 150rem;
      font-size: 12rem;
      color: #333;
      // -webkit-line-clamp: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-left: 12rem;
      margin-top: 10rem;
    }
  }
}
</style>